<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="header-search flex space-between">
			<div>
				<el-input class="search-item" placeholder="请输入任务名称" v-model="state.apiData.name" size="default"
					style="width: 220px;" clearable @change="searchChange()">
				</el-input>

				<el-button size="default" type="primary" @click="searchChange()" >查询</el-button>
				<el-button size="default" @click="reset()" >重置</el-button>
			</div>

			<el-button size="default" type="primary" @click="publishTasks()">发布任务</el-button>
		</div>

		<div class="page-main" v-loading="state.tableData.loading" ref="pageMain">
			<el-card shadow="hover" style="height:100%;">

				<el-table :data="state.tableData.data" style="width: 100%" :height="state.tableHeight"
					ref="multipleTableRef">
					<el-table-column label="序号" type="index" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="name" label="任务名称" show-overflow-tooltip align="center">
						<template  #default="scope">
							<span style="color: #409EFF;" @click="details(scope.row.id)">{{scope.row.name}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="unit" label="单位" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="created_at" label="发布时间" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="name" label="领取进度" show-overflow-tooltip align="center">
						<template  #default="scope">
							<span style="color:#409EFF">{{scope.row.receivedQuantity}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="完成进度" show-overflow-tooltip align="center">
						<template  #default="scope">
							<span style="color:#F56C6C">{{scope.row.collectsQuantity}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="450" fixed="right" align="center">
						<template #default="scope">
							<!-- <el-button size="small" link type="primary" @click="details(scope.row.id)">发布指标</el-button> -->
							<el-button size="small"  type="primary" @click="details(scope.row.id)">发布子任务</el-button>
							<el-button size="small"  type="danger" @click="edit(scope.row)">修改任务</el-button>
							<el-button size="small"  type="warning" @click="exportFile(scope.row.id)">导出数据</el-button>
						</template>
					</el-table-column>
				</el-table>


				<div class="pagination-box">
					<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiData.page" background
						v-model:page-size="state.apiData.limit" layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total">
					</el-pagination>
				</div>
				<AddDialog ref="AddDialogRef" @refresh="getList()" />
			</el-card>
		</div>
	</div>
</template>

<script setup name="taskPackage-list">
import { getCurrentInstance } from 'vue';
import { taskPackageApi } from '/@/api/taskPackage/index';
import { excelFileApi } from '/@/api/excelFile/index';
import { ElMessageBox, ElMessage } from 'element-plus';

// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const AddDialog = defineAsyncComponent(() => import('/@/views/taskPackage/list/dialog.vue'));
const router = useRouter();
// 定义变量内容
const AddDialogRef = ref()
const state = reactive({
	apiData: {
		page: 1,
		limit: 10,
		name: '',
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
});

// 页面加载时
onMounted(() => {
	// getDepatment()
	getList()
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 130 - 52 + "px";
});

const searchChange = () => {
	state.apiData.page = 1
	getList()
}

// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.limit = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	getList();
};

/**
 * 重置按钮
 */
 const reset = () => {
	state.apiData.page = 1
	state.apiData.name = '';
	state.apiData.city_id = '';
	state.apiData.year = '';
	getList()
}

// 获取列表
const getList = () => {
	state.tableData.loading = true
	taskPackageApi().taskPackageList(state.apiData).then(res => {
		state.tableData.loading = false
		state.tableData.data = res.data.data
		state.tableData.total = res.data.total
	}).catch(() => {
		state.tableData.loading = false
	})

}


const details = (id) => {
	// this.$router.push('/target')
	router.push({
		path: '/norm/list',query: {task_id:id}
	});
}

// 发布任务弹窗
const publishTasks = () => {
	AddDialogRef.value.openDialog();
}

// 编辑弹窗
const edit= (row) => {
	AddDialogRef.value.openDialog(row);
}

// 导出文件
const exportFile= (id) => {
	let query = {id:id}
	excelFileApi().taskExportFile(query).then(res => {
		if(res.data){
			let url = res.data;
			const iframe = document.createElement('iframe'); // 创建一个HTML 元素
			iframe.style.display = 'none'; // 隐藏iframe 防止影响页面      
			iframe.style.height = 0; // 高度设置0 防止影响页面      
			iframe.src = url;// 下载链接       
			document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求      // 5分钟之后删除
			setTimeout(() => { iframe.remove(); }, 5 * 60 * 1000);
			ElMessage.success('导出成功,请点击下载列表查看!');
		}else{
			ElMessage.error('导出失败!');
		}
	 
	}).catch(() => {
	})
}

</script>

<style lang="scss" scoped>
.page-main {
	height: calc(100vh - 50px - 106px);
}
</style>
